<!--
 * @Author: 高国强 dx_gaogq@dxinfor.com
 * @Date: 2025-08-09 17:25:11
 * @LastEditors: 高国强 dx_gaogq@dxinfor.com
 * @LastEditTime: 2025-08-11 15:39:00
 * @FilePath: \mapbg_largeSizeScreen\src\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import "mars3d/mars3d.css"; // v3.8.6及之前版本使用 import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
// import "mars3d-space" // 导入mars3d插件，导入即可，自动注册（按需使用，需要先npm install mars3d-space）
import mars3dConfig from "./config";
import { onMounted } from "vue";

console.log("mars3dConfig", mars3dConfig);
onMounted(() => {
  initMap();
});

function initMap() {
  // 创建三维地球场景
  const Cesium = mars3d.Cesium;
  // mars3d.Log.hasInfo(false); // 关闭调试日志
  const map = new mars3d.Map("mars3dContainer", mars3dConfig);
  console.log("mars3d的Map主对象构造完成", map);
  console.log(
    "当前电脑是否支持webgl2",
    Cesium.FeatureDetection.supportsWebgl2(map.scene)
  );
  return map;
}
</script>

<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>

<style scoped>
#mars3dContainer {
  width: 100%;
  height: 100%;
}
</style>
